<template>
    <IContent :spinShow="loading">
        <alert banner type="warning" style="margin-bottom: 0;">
            货架号解读说明：货架分区_货架属性_货架行_货架列_货架层
        </alert>
        <ISearch v-model="search">
            <FormItem label="货架号">
                <Input v-model="search.code" placeholder="货架号" size="small"></Input>
            </FormItem>
            <FormItem label="货架分区">
                <Input v-model="search.partition" placeholder="货架分区" size="small"></Input>
            </FormItem>
            <FormItem label="货架属性">
                <Select v-model="search.attribute" size="small" clearable style="width: 150px;">
                    <Option :value="0">良品货架</Option>
                    <Option :value="1">不良品货架</Option>
                    <Option :value="2">可销售不良品货架</Option>
                </Select>
            </FormItem>
            <FormItem :label-width="1">
                <Button type="primary" icon="ios-search" @click="getLists(1)" size="small">搜索</Button>
                <Button icon="ios-add" size="small"  @click="openComponent('ICreate')">生成货架</Button>
            </FormItem>
        </ISearch>

        <ITable :current="page.current" :table="table" :total="page.total" @on-page-change="pageChange">
            <template slot-scope="{ row, index }" slot="attribute">
                <Tag v-if="row.attribute === 0">良品货架</Tag>
                <Tag v-if="row.attribute === 1">不良品货架</Tag>
                <Tag v-if="row.attribute === 2">可销售不良品货架</Tag>
            </template>
            <template slot-scope="{ row, index }" slot="status">
                <span v-if="row.status === 0">不可用</span>
                <span v-if="row.status === 1">可用</span>
            </template>
            <template slot-scope="{ row, index }" slot="action">
                <PoptipButton @on-ok="remove(row)" size="small">删除</PoptipButton>
            </template>
        </ITable>

        <component v-if="componentProps.value" :is="componentProps.view" v-model="componentProps.value" :props="componentProps.props"
                   @input="getLists(page.current)"></component>
    </IContent>
</template>

<script>
    import contentListPage from "../../../mixins/contentListPage";
    import IContent from "../../../components/content/index";
    import ISearch from "../../../components/content/search";
    import ITable from "../../../components/content/table";
    import PoptipButton from "../../../components/content/poptipButton";
    import contentDrawer from "../../../mixins/contentDrawer";
    import ICreate from "./create"

    export default {
        name: "index",
        components: {PoptipButton, ITable, ISearch, IContent, ICreate},
        mixins: [contentListPage, contentDrawer],
        data(){
            return {
                loading: false,
                search: {},
                table: {
                    columns: [
                        {
                            title: '货架号',
                            key: 'code'
                        },
                        {
                            title: '货架属性',
                            slot: 'attribute'
                        },
                        {
                            title: '货架分区',
                            key: 'partition'
                        },
                        {
                            title: '状态',
                            slot: 'status'
                        },
                        {
                            title: '操作',
                            slot: 'action'
                        },
                    ]
                }
            }
        },
        methods: {
            getLists(page){
                this.loading = true;
                this.$http.get(`warehouse/location`, {
                    params: Object.assign({}, this.search, {page: page})
                }).then((data) => {
                    this.table.data = data.data
                    this.page.total = data.total
                    this.page.current = data.current_page
                }).finally(() => {
                    this.loading = false;
                });
            }
        }
    }
</script>

<style scoped>

</style>
